<template>
<!-- // 社区简介详情 -->
  <div class="Introduction">
    <!-- 顶部导航栏 --> 
    <van-nav-bar  title="详情" left-arrow @click-left="$router.go(-1)" />
    
    <!-- 社区简介 -->
    <div class="instructions">
      <div class="instruc-box">
        <!-- 社区名 -->
        <div class="fl ">
          <div class="instruc-title">{{detailObj.title}}</div>
          <div class="van-cells">
            <div class="instruc-map">{{detailObj.updateDate}}</div>
          </div>
          
        </div>
        <!-- 收藏 -->
        <div v-if="userId != null" class=" share-box ">
          <div v-if="detailObj.isCollect == 1" @click="collection(1)" class="share van-cells fl" style="background-color:#FF8921;">
            <em><img src="../../assets/img/shoucang.png" alt=""></em>
            <span>收藏</span>
          </div>
          <div v-else  @click="collection(2)" class="share van-cells fl" style="background-color:#999999;">
            <em><img src="../../assets/img/shoucang.png" alt=""></em>
            <span>已收藏</span>
          </div>
        </div>
      </div>
      <!-- 简介 -->
      <div class="instruc-Community">
        <div class="title-city" v-html="detailObj.content"></div>
      </div>
      
    </div>
    
  </div>
</template>
<script>

import apiHttp from '../../api/index'
import { Toast } from 'vant';
   export default {
    data() {
      return {
        id:this.$route.query.id ? this.$route.query.id : '', // 判断页面是否存在id
        detailObj:{},
        userId:sessionStorage.getItem('userId'),
        timestamp:"",
        noncestr:"",
        signature:"",
        title:""
       }
    },
    mounted(){
      this.getArticleById()
      this.getSignature()
    },
    beforeRouteEnter(to, from, next){
      if (to.path !== global.location.pathname) {
        location.assign(to.fullPath)
      } else{
        next()
      }  
    },
    methods:{
      getArticleById(){
        let parmes  = {
          articleId:this.id,
          userId:this.userId,
        }
        apiHttp.apiIndex.getArticleById(parmes,resp=>{
          if(resp.resultCode == '000000'){
            this.detailObj = resp.data.article
            this.title = resp.data.article.title
          }else{
            Toast(resp.resultMsg);
          }
        })
      },
      // 收藏/取消收藏
      collection(type){
        let parmes = {
          userId:this.userId,
          articleId:this.id,
          type:type
        }
        apiHttp.apiIndex.collectArticle(parmes,resp=>{
          if(resp.resultCode == '000000'){
            if(type == 1){
              Toast('收藏成功')
              this.detailObj.isCollect = 2
            }else{
              Toast('取消收藏')
              this.detailObj.isCollect = 1
            }
          }
        })
      },
      getSignature(){
        let params = {
          url:window.location.href
        }
        //获取签名
        apiHttp.apiIndex.getSignature(params,resp=>{
            this.timestamp = resp.timestamp
            this.noncestr =  resp.noncestr
            this.signature = resp.signature 
            this.wxShare()
        })
      },
      wxShare(){
        let self = this
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wx3ae18ee65c193eee', // 和获取Ticke的必须一样------必填，公众号的唯一标识
            timestamp:self.timestamp, // 必填，生成签名的时间戳
            nonceStr: self.noncestr, // 必填，生成签名的随机串
            signature:self.signature,// 必填，签名，见附录1
            jsApiList: [
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
                'onMenuShareQQ',
                'onMenuShareQZone'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
        this.ready()
      },
      ready(){ 
        let self = this
        let configs = {
          title:self.detailObj.title, // 分享标题
          desc:self.detailObj.title, // 分享描述
          link: window.location.href, // 分享链接
          imgUrl: 'http://132.232.16.61:8006/img/imgs/logo/logo.png', // 分享图标
          success: function () {
              // 用户确认分享后执行的回调函数、
              self.addShareRecord()
          },
          cancel: function () {
          }
        }
        wx.ready(function(){
          //----------“分享给朋友”
          wx.onMenuShareAppMessage(configs);
          // ------------"分享到朋友圈"
          wx.onMenuShareTimeline(configs);
          // //-------------分享到QQ
          wx.onMenuShareQQ(configs);
          //-------------分享到QQ空间
          wx.onMenuShareQZone(configs);
      
        })
        wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            console.log(res);
        }); 
      },
      // 分享成功之后获取积分
      addShareRecord(){
        let params = {
          userId: this.userId,
          articleId:this.id
        }
        apiHttp.comIndex.addShareRecord(params,resp=>{
          if(resp.resultCode == '000000'){

          }else{
            console.log(resp)
          }
        })
      }
    }
  }
</script>
<style scoped>
  .title-city>>> img{
    width: 100%!important;
    height: 100%!important;
  }
  .title-city{
    font-size: 14px;
    line-height: 0.9rem;
  }
  /* .title-city>>> p{
    font-size: 14px!important;
    line-height: 0.9rem!important;
    font-family: 'Avenir', Helvetica, Arial, sans-serif!important;
  }  */
  .van-nav-bar__right span{
    color: #D33043!important;
  }
  .Intr-img{
    height: 9rem;
  }
  .instructions{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 1rem;
  }

  .instructions .instruc-box::after {
    overflow: hidden;
    content: "";
    display: block;
    height: 0;
    clear: both;
  }
  .instruc-title{
    color: #000000;
    font-size: 0.7rem;
    line-height: 1rem;
  }
  .instruc-title::after{
    position: absolute;
    left: -10px;
    /* top: 28px; */
    content: '';
    width: 3px;
    border-top: 18px solid #D33043;
  }
  .instruc-map{
    font-size: 0.6rem;
    color: #999999;
   
  }
  .instruc-box{
    position: relative;
    padding: 0.8rem 0 0.5rem 0;
  }
  .van-icon{
    min-width: 1em;
    font-size: 16px;
    line-height: 24px;
    margin-right: 5px;
  }
  .van-cells {
     margin-top: 0.3rem;
    /* width: 100%; */
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 24px;
    color: #333;
    font-size: 14px;
    overflow: hidden;
  }
  .share{
    background-color: #D33043;
    color: #ffffff;
    margin: 0;
    padding: 0.05rem 0.5rem;
    border-radius: 20px;
  } 
  /* 简介 */
  .community span{
    color: #333333;
    font-size: 0.6rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    display: inline-block;
  }
  
  .community{
    margin-bottom: 0.3rem;
  }
  .share-box{
    overflow: hidden;
    width: 100%;
  }

  .share em {
    width: .6rem;
    height: .6rem;
    display: block;
    float: left;
    line-height: 1rem;
    margin-right: 0.3rem;
  }
</style>